
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.common.dev.js"></script>
    <style>
        li{
            margin-left: 10px;
        }
    </style>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.common.dev.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.common.dev.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="findName"><button type="button" @click="selectFromName">查询</button>
    <form>
        goods_code: <input type="text" name="goods_code" v-model="saveForm.goods_code"> <br>
        goods_name: <input type="text" name="goods_name" v-model="saveForm.goods_name"> <br>
        goods_count: <input type="text" name="goods_count" v-model="saveForm.goods_count"> <br>
        goods_price: <input type="text" name="goods_price" v-model="saveForm.goods_price"> <br>
        <button type="button" @click="add">添加</button>
    </form>
    <table width="800" align="center">
        <tr>
            <td>商品id</td>
            <td>商品编号</td>
            <td>商品名称</td>
            <td>商品库存</td>
            <td>商品价格</td>
            <td>操作</td>
        </tr>
        <tr v-for="goods in list">
            <td>{{goods.goods_id}}</td>
            <td>{{goods.goods_code}}</td>
            <td>{{goods.goods_name}}</td>
            <td>{{goods.goods_count}}</td>
            <td>{{goods.goods_price}}</td>
            <td>
                <a @click="del(goods.goods_id)">删除</a>
                |
                <a @click="updateUI(goods)">修改</a>
            </td>
        </tr>
    </table>
    <div id="updateUI" style="display: none">
        <input type="hidden" v-model="updateForm.id">
        name: <input type="text" name="name" v-model="updateForm.name"> <br>
        birthday: <input type="text" name="birthday" v-model="updateForm.birthday"> <br>
        balance: <input type="text" name="balance" v-model="updateForm.balance"> <br>
        <button type="button" @click="update">修改</button>
    </div>
    <div class="container" style="width:40%;">
        <div class="row" >
            <div  style="align: center;">
                <ul class="pagination pagination-sm" >
                    <li><a class="btn btn-default btn-sm" @click="headAndend(1)">首页</a></li>
                    <li><a class="btn btn-default btn-sm" @click="changePage(-1)">上一页</a></li>
                    <li class="disabled"><a class="btn btn-default btn-sm">当前第{{page}}页</a></li>
                    <li><a class="btn btn-default btn-sm">每页
                        <select v-model="size" @change="findAll">
                            <option value="5">5</option>
                            <option value="10">10</option>
                            <option value="20">20</option>
                            <option value="50">50</option>
                        </select>
                        条数据</a></li>
                    <li><a class="btn btn-default btn-sm">共{{pageCount}}页</a></li>
                    <li><a class="btn btn-default btn-sm" @click="changePage(+1)">下一页</a></li>
                    <li><a class="btn btn-default btn-sm" @click="headAndend(0)">尾页</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script>
    axios.defaults.baseURL = "http://localhost:8080/";
    axios.interceptors.request.use(function (config) {
        config.headers.contentType = "applicaion/json";
        return config;
    })

    let app = new Vue({
        el: "#app",
        created(){
            this.findAll();
        },
        data:{
            size: '5',
            page: '1',
            pageCount: "",
            findName: "",
            list:[],
            saveForm: {
                goods_code: "",
                goods_name: "",
                goods_count: "",
                goods_price: ""
            },
            updateForm: {
                id: "",
                name: "",
                birthday: "",
                balance: "",
            },

            w: null,
            list: []
        },
        methods:{
            findAll(){
                let self = this;
                axios.get("goods/" + this.page + "/" + this.size).then(function (response) {
                    let pageData = response.data.data;
                    self.list = pageData.data;
                    self.pageCount = pageData.pageCount;
                });
            },
            add() {
                let self = this;
                // 只要指定了Content-Type: application/json，那么axios就会把参数格式化为json字符串
                axios.post("goods", this.saveForm).then(function (response) {
                    self.findAll();
                    self.name = self.birthday = self.balance = "";
                });
            },
            del(goods_id) {
                let self = this;
                axios.delete("goods/" + goods_id).then(function (response) {
                    self.findAll();
                });
            },
            updateUI(u) {
                this.updateForm.id = u.id;
                this.updateForm.name = u.name;
                this.updateForm.birthday = u.birthday;
                this.updateForm.balance = u.balance;
                this.w = layer.open({
                    title:"修改用户",
                    type:1,
                    content: $("#updateUI")
                });
            },
            update() {
                let self = this;
                axios.put("users", this.updateForm).then(function(response) {
                    self.findAll();
                    self.id2 = self.name2 = self.birthday2 = self.balance2 = "";
                    layer.close(self.w);
                });
            },
            selectFromName(){
                let self = this;
                console.log(this.findName);
                axios.get("goods/"+ this.findName).then(function (response) {
                    self.list="";
                    self.list = response.data.data;
                })
            },
            changePage(page){
                let newPage = +this.page + +page;
                if(newPage == 0){
                    this.findAll();
                    return;
                };
                if(newPage > this.pageCount){
                    this.findAll();
                    return;
                }
                this.page = newPage;
                this.findAll();
            },
            headAndend(page){
                this.page = this.pageCount;
                if(page == 1){
                    this.page = page;
                }
                this.findAll();
            },
        },
        filters: {
            "foo": function(val) {
                let date = new Date(val);
                let str = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " +date.getDay();
                return str;
            }
        }


    });
</script>
</body>
</html>